<template>
  <div class="bind-phone">
     <div>
          <div>
          <label>手机号</label>
          <input v-model="form.tel" type="text" placeholder="输入手机号">
      </div>
      <div>
         <label>验证码</label>
          <input v-model="form.code" type="text" placeholder="请输入验证码">
          <span @click="getCode">{{hint}}</span>
      </div>
      <div>
          <label>密码</label>
          <input v-model="form.password" type="password" placeholder="请输入6-15位字符密码">
      </div>
     </div>
      <div class="completes" @click="bindWX"><button>完成</button></div>
  </div>
</template>

<script>
export default {
    data() {
        return {
            name: '绑定手机号',
            form: {
                tel: '',
                code: '',
                password: ''
            },
            hint: '获取验证码',
            wxMessage: {},
            userMessage: this.userData,
            disableds:true//发送验证码
        }
    },
    mounted() {
        document.title = this.name
        // 获取微信信息
        this.wxMessage = this.utils.cookie('get', 'wx_message')
    },
    computed: {
        userData() {
            return this.$store.state.userMessage
        }
    },
    updated() {
        if (this.form.tel && this.form.code && this.form.password) {
            document.querySelector('.completes>button').style.backgroundColor =
                '#00d8c9'
        }
    },
    methods: {
        //   获取验证码
        getCode() {
            if (!this.disableds){
                return
            }
            this.disableds = false
            let i = 60
            let type = {
                type: 5,
                tel: this.form.tel
            }
            if (!/^1[3|4|7|5|8]\d{9}$/.test(this.form.tel)) {
                return mui.toast('请输入正确的手机号')
            }
            // 判断手机号是否被注册
            let countDown
            this.utils.$get(
                this.utils.GET_USERTEL,
                data => {
                    // 发送验证码
                    this.utils.$post(
                        this.utils.GET_USERSMS,
                        data => {
                            
                            countDown = setInterval(() => {
                                this.disableds = true
                                i--
                                this.hint = i + 's'
                                if (i <= 0) {
                                    this.disableds = false
                                    this.hint = '获取验证码'
                                    clearInterval(countDown)
                                }
                            }, 1000)
                            this.flag = true
                        },
                        type
                    )
                },
                type
            )
        },
        // 绑定微信
        bindWX() {
            console.log(this.userData)
            if (!/^1[3|4|7|5|8]\d{9}$/.test(this.form.tel)) {
                return mui.toast('请输入正确的手机号')
            }
            if (!/^[0-9]*$/.test(this.form.code)) {
                return mui.toast('请填写正确的验证码')
            }
            if (!/^[a-zA-Z0-9]{6,15}$/.test(this.form.password)) {
                return mui.toast('请填写正确的密码')
            }
            // 用户是否已注册
            this.utils.$get(
                this.utils.GET_USERTEL,
                res => {
                    let userData
                    console.log(res,'获取的状态')
                    if (res.code != 0) {
                        userData = {
                            code: this.form.code,
                            tel: this.form.tel,
                            type: 5,
                            sex: this.userData.userSex,
                            openid: this.wxMessage.unionid,
                            channel: 3,
                            name: this.userData.userName
                        }
                    } else {
                        userData = {
                            code: this.form.code,
                            tel: this.form.tel,
                            type: 5,
                            sex: this.userData.userSex,
                            openid: this.wxMessage.unionid,
                            channel: 3,
                            name: this.userData.userName,
                            password: this.form.password
                        }
                    }
                    // 微信注册
                    this.utils.$post(
                        this.utils.ADD_USER_CROWD,
                        data => {
                            mui.toast('绑定成功')
                            this.utils.$get(this.utils.GET_USER_mESSAGE,res => {
                                this.$store.commit('transmitUser', res.data)
                                console.log('？？？？？')
                                this.$router.push({path:'/home/user_message'})
                            })
                        },
                        userData
                    )
                },
                { type: 0 }
            )
        }
    }
}
</script>
<style lang="less">
.bind-phone {
    min-height: 8rem;
    width: 100%;
    background-color: #f5f5f5;
    > div {
        > div {
            margin-top: 0.2rem;
            padding: 0 0.4rem;
            background-color: #fff;
            height: 0.8rem;
            font-size: 0.28rem;
            color: #232323;
            line-height: 0.8rem;
            padding: 0.1rem;
            position: relative;
            &:first-child {
                margin-top: 0;
            }
            > span {
                position: absolute;
                top: 0.1rem;
                right: 0;
                padding: 0 0.1rem;
                height: 0.6rem;
                border-left: 1px solid #f5f5f5;
                color: #00d8c9;
                width: 1.5rem;
                text-align: center;
            }
            > label {
                float: left;
            }
            > input {
                font-size: 0.28rem;
                margin: 0;
                padding: 0;
                height: 0.6rem;
                float: right;
                border: none;
                width: 50%;
            }
        }
    }
    .completes {
        border: 0;
        height: 0.8rem;
        margin: 1rem 0.3rem;
        > button {
            border-radius: 0.4rem;
            width: 100%;
            height: 100%;
            background-color: #ddd;
            color: #ccc;
        }
    }
}
</style>

